<template>
  <div class="hot">
<!--    <h1>竖版-这是热门内容</h1>-->
    <ul class="hotcontent">
      <li v-for="(item,index) in hotlist">
        <span><img :src="hotlist[index].ico" alt=""></span>
        <div class="hot_contimg">
          <img :src="hotlist[index].images" alt="">
        </div>
        <div class="hot_cont">
          <h2>{{item.title}}</h2>
          <span>{{item.des}}</span>
          <p>
            <span class="span_left">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-sound-wave"></use>
              </svg>
              {{item.play}}
            </span>
            <span class="span_right">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-listen"></use>
              </svg>
              {{item.listen}}
            </span>
          </p>
        </div>
      </li>
      <li v-for="(item,index) in zonghelist">
        <span>{{index+4}}</span>
        <div class="hot_contimg">
          <img :src="item.images" alt="">
        </div>
        <div class="hot_cont">
          <h2>{{item.title}}</h2>
          <span>{{item.des}}</span>
          <p>
            <span class="span_left">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-sound-wave"></use>
              </svg>
              {{item.comment}}
            </span>
            <span class="span_right">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-listen"></use>
              </svg>
              {{item.listen}}
            </span>
          </p>
        </div>
      </li>
    </ul>

  </div>
</template>

<script>
    export default {
        // name: "hot"
      data(){
        return{
          hotlist:[
            {
              ico:'./data/src/assets/images/paihang/img_rank_first_4dd5bad.png',
              images:'./data/src/assets/images/paihang/wKgO0F4TGCaSaeIdAAFLb4P_X-4063.jpg!op_type=3&columns=144&rows=144&magick=webp',
              title:'辽沈先声',
              des:'热点资讯实时发布，了解世界快人一步',
              play:'6.92亿',
              listen:'5001'
            },
            {
              ico:'./data/src/assets/images/paihang/img_rank_second_977bd19.png',
              images:'./data/src/assets/images/paihang/wKgJX1mAQgyi9-IfAAAw0CICWi8961.jpg!op_type=3&columns=144&rows=144&magick=webp',
              title:'郭德纲21年相声精选',
              des:'爆料不断的历年经典相声',
              play:'13.34亿',
              listen:'148'
            },
            {
              ico:'./data/src/assets/images/paihang/img_rank_third_1a96b0c.png',
              images:'./data/src/assets/images/paihang/wKgMaFz2R23QnVYnAAD1Fgal4HY116.jpg!op_type=3&columns=144&rows=144&magick=webp',
              title:'南都快讯',
              des:'新鲜、独家、热门都在这里',
              play:'4.15亿',
              listen:'3305'
            }
          ],
          zonghelist:[]
        }
      },
      mounted() {
        var _this=this;
        this.$http.get('./data/zonghe.json')
          .then((response)=>{
            //成功之后的
            this.zonghelist=response.data.zonghelist;
            // console.log(zonghelist);
          })
          .catch(function (err) {
            //失败的
            console.log(err);
          })
          .then(function () {
            //总会执行的
            //always executed
          })
      }
    }
</script>

<style scoped>
  .hot{
    display: flex;
    /*background-color: red;*/
    width: 80%;
    height: 700px;
    overflow-y: auto;
  }
  .hot::-webkit-scrollbar{
    display: none;
  }
  .hot ul{
    width: 100%;
    flex-shrink: 0;
  }
  .hotcontent li{
    border-bottom: 1px solid #F3F3F3;
    display: flex;
    padding: 10px 0;
    /*justify-content: center;*/
  }
  .hotcontent li>span{
    display: block;
    text-align: center;
    width: 10%;
    /*margin: 18px 0;*/
    color: #40404c;
    font-size: 16px;
    font-weight: 600;
  }
  .hotcontent li>span>img{
    height: 19px;
  }
  .hotcontent li>.hot_contimg{
    width: 25%;
  }
  .hotcontent li>.hot_contimg>img{
    width: 100%;
    border-radius: 5px;
  }
  .hotcontent li .hot_cont{
    width: 60%;
    padding-left: 10px;
    display: flex;
    flex-direction: column;
  }
/**/
  .hot_cont>h2{
    color: #333;
    font-size: 16px;
    line-height: 1.38;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .hot_cont>span{
    font-size: 13px;
    color: #999;
    line-height: 1.38;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
  }
  .hot_cont>p{
    margin: 20px 0 0;
  }
  .hot_cont>p>span{
    font-size: 12px;
    color: #999;
    margin-right: 5px;
  }
</style>
